﻿/*外层*/
.magazine-layout {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    max-height: calc(100vh);
    flex-direction: row;
    scroll-behavior: smooth;
}

/*分栏*/
.magazine-columns {
    font-size: small;
    padding: 3rem 0;
}


.magazine-style::-webkit-scrollbar {
    display: none;
}

/*分栏列表*/
.magazine-style .columns-layout {
    height: calc(100vh - 6rem);
    column-width: calc(100vh - 6rem);
    column-gap: 0;
}

/*隐藏头部尾部*/
.variable.container {
    margin: 0;
    padding: 0;
    max-width: none;
}

.m-sheet.m-app-bar.m-toolbar:not(.m-sheet--outlined), .m-footer--absolute:not(.m-footer--inset) {
    display: none;
}

.m-main {
    padding: 0 !important;
}

/*换页按钮*/
.magazine-style .page-button-card {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    right: 50%;
    width: max-content;
    padding: 0 1rem;
    transform: translate(-50%,0);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
/*内容*/
.magazine-style section {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/*首页*/
.magazine-style .main-card {
    min-width: 50%;
}

    .magazine-style .main-card .image-card {
        background: no-repeat center;
        background-size: cover;
        -moz-background-size: cover;
        height: calc(100vh);
    }

    .magazine-style .main-card .content-card {
        position: relative;
        padding: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        top: -25rem;
    }

        .magazine-style .main-card .content-card .brief-card {
            text-align-last: center;
            white-space: pre-line;
        }

/*故事*/
.magazine-style .story-card {
    padding-top: calc(10vh);
}

    .magazine-style .story-card .content-card {
        white-space: pre-line;
    }
/*角色*/
.magazine-style .character-card img {
    height: min-content;
    width: 20%;
}

.magazine-style .character-card .item-card {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

    .magazine-style .character-card .item-card.opposite {
        flex-direction: row-reverse;
    }

    .magazine-style .character-card .item-card .content-card {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: 55%;
    }

    .magazine-style .character-card .item-card.opposite .content-card {
        align-items: flex-end;
    }

    .magazine-style .character-card .item-card .name {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .magazine-style .character-card .item-card .description {
        white-space: pre-line;
    }
